<template>
	<baseDialog ref="dialogRef" :title="dialogTitle" width="450px" :show-footer="false" @confirm="handleSubmit" @close="handleClose">
		<el-form ref="formRef" :model="formData" class="login-content-form" :rules="rules">
            <el-form-item class="login-animation" prop="account">
                <el-input text placeholder="请输入账号" v-model="formData.account" clearable autocomplete="off">
                    <template #prefix>
                        <el-icon class="el-input__icon"><ele-User /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item class="login-animation" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="formData.password" autocomplete="off" show-password
                    clearable>
                    <template #prefix>
                        <el-icon class="el-input__icon"><ele-Lock /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item class="login-animation" prop="code">
                <el-col :span="15">
                    <el-input text maxlength="4" placeholder="请输入验证码" v-model="formData.code" clearable autocomplete="off">
                        <template #prefix>
                            <el-icon class="el-input__icon"><ele-Position /></el-icon>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="8">
                    <el-button class="login-content-code" v-waves><el-image fit="fill" :src="imageCaptcha" alt="验证码"
                            class="h-[32px] w-full" @click="getCaptcha" /></el-button>
                </el-col>
            </el-form-item>
            <el-form-item class="login-animation">
                <el-button type="primary" class="login-content-submit" round v-waves @click="handleSubmit">
                    <span>登录</span>
                </el-button>
				<el-button type="info" class="login-content-submit !ml-0" round v-waves @click="handleRegister">
                    <span>账号注册</span>
                </el-button>
            </el-form-item>
		</el-form>
	</baseDialog>
</template>

<script setup lang="ts" name="appStoreImport">
import { ref, shallowRef, reactive, computed, onMounted } from 'vue';
import type { FormInstance } from 'element-plus';
import { messageSuccess } from '/@/utils/message';
import { manageLogin } from '/@/api/addons/manage';
import { captchaCreate } from '/@/api/login';

const dialogRef = ref(null);    

const dialogTitle = computed(() => {
	return '会员登录';
});

const emit = defineEmits(['submit', 'close']);

const formRef = shallowRef<FormInstance>();

const formData = reactive({
	account: '',
	password: '',
	code: '',
	captchaUniqid: ''
});

const rules = reactive({
	account: [
		{ required: true, message: '账号不能为空', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '密码不能为空', trigger: 'blur' }
	],
	code: [
		{ required: true, message: '验证码不能为空', trigger: 'blur' }
	]
});

const imageCaptcha = ref('');

const getCaptcha = async () => {
	const res = await captchaCreate();
	imageCaptcha.value = res.image;
	formData.captchaUniqid = res.uniqid;
}

const handleSubmit = async () => {
	await formRef.value?.validate(async (valid: boolean) => {
		if (!valid) return;
		await manageLogin(formData);
		dialogRef.value?.close();
		messageSuccess(dialogTitle.value + '成功');
		emit('submit');
		location.reload();
	});
};

const handleRegister = () => {
	window.open('https://www.tmadmin.cn/', '_blank', 'noopener,noreferrer');
};

const handleClose = () => {
	emit('close');
};

const open = () => {
	dialogRef.value?.open();
};

onMounted(() => {
	getCaptcha();
})

defineExpose({
	open
});
</script>
<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;

	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
	}

	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
}
</style>
<style lang="scss">
.login-content-form {
	.login-content-code>span {
		width: 100%;
	}
}
</style>